<template>
    <div class="box">
     <!-- 这是首页中的新品首发的组件 -->
     <h1>{{title}}</h1>
     <ul>    
   <!-- @click="Togoodsxq"  是点击跳转到 Goodsdetails.vue 商品的详情页面-->
        <li v-for="item in newGoodsList" :key="item.id" @click="Togoodsxq(item.id)">
            <img :src="item.list_pic_url" alt="">
            <strong>{{item.name}}</strong>
            <p>{{item.retail_price | formarMoney}}</p>
        </li>
        
     </ul>
    </div>
</template>

<script>
export default {
    name: "NewStarting",
    data() {
        return {

        };
    },
    // 在子组件中接收父组件传递进来的数据
    props:['newGoodsList',"title"],
    mounted(){
    setTimeout(()=>{
        console.log(this.newGoodsList ,this.title);
    },300) 

    },
    methods:{
        Togoodsxq(id){   //点击跳转到商品的详情页面
          this.$router.push({path:'/goodsdetails',query:{id:id}}) 
        }
    }
};
</script>

<style scoped lang="less">
 .box{
     h1{
            text-align:center;
            margin-top:30px;
            margin-bottom: 20px;
           
        }
    ul{
        
        display: flex;
        flex-wrap: wrap;
       
        li{
         width:50%;
         height:300px;
         text-align: center;
         img{
            width:200px;
         }
         strong{
           font-size:16px;
           font-weight: 700;

         }
         p{
            margin-top:10px;
            font-size:16px;
            color:red;
         }
        }
    }
 }
</style>